<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<!-- 引用Vue -->
<script src="./vue.js"></script>
<style>
    .content {}

    .play {
        width: 100%;
        height: 60px;
        background-color: #fff;
        border-top: 0.5px solid #777;
        position: fixed;
        bottom: 0;
        /* 开启弹性布局 */
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .play .pic {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin: 0 15px;
        animation: roll 10s linear infinite;

    }

    .play .con {
        flex: 1;
    }

    .play .con h6 {
        font-size: 14px;
    }

    .play .con p span {
        font-size: 12px;
        color: #777;
    }

    .play .right {
        width: 80px;
        margin-left: 10px;
        display: flex;
        justify-content: space-between;
    }

    .play .song-list {
        width: 100%;
        height: 35vh;
        background-color: rgba(0, 0, 0, 0.596);
        text-align: center;
        color: #fff;
        /* 固定定位 */
        position: fixed;
        bottom: 0px;
    }

    .play .song-list h3 {
        font-size: 16px;
        line-height: 40px;
    }

    .play .song-list .song-ul {
        height: 20vh;
        overflow-y: auto;
        margin-top: 20px;
    }

    .play .song-list .song-ul li {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        line-height: 24px;
    }

    /* 音乐列表字体 */
    .play .song-list .song-ul li .gscol{
		color: skyblue;
	}

    .play .song-list .song-ul li .delpic {
        width: 20px;
        height: 20px;
        margin-right: 20px;
    }

    /* @keyframes 自定义名字 { }
       rotate(度数) :旋转*/
    @keyframes roll {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }
</style>

<body>
    <div id="app">
        <!-- 头部 -->
        <tab-nav v-bind:linum="linum" v-on:tabgo="tabgo"></tab-nav>
        <!-- 中间内容 -->
        <div class="content">
            <!-- 第一页 -->
            <div v-if="linum==1">
                <!-- 调用组件 -->
                <recommended></recommended>
                <!-- 修改部分 -->
                <!-- 使用v-bind:传值 自定义事件接收子组件反向传值 -->
                <music-list v-bind:musiclist="musiclist" @play="play"></music-list>
            </div>

            <!-- 第二页 -->
            <div v-if="linum==2">
                <!-- 热歌部分 -->
                <hot-song v-bind:musiclist="musiclist" v-bind:time="time" @play="play"></hot-song>
                <!-- 热歌部分 -->
                <!-- 修改部分 -->
            </div>
            <!-- 播放组件 
                @play：播放事件
                @pause：暂停事件
                    -->
            <audio :src="url" autoplay @play="Playstate" @pause="Pausestate" ref="player"></audio>

            <!-- 全局播放器 -->
            <div class="play" v-if="newMusic">
                <img class="pic" v-bind:style="{animationPlayState: show? 'running' :'paused'}" :src="newMusic.picUrl">
                <div class="con">
                    <h6>{{newMusic.name}}</h6>
                    <p>
                        <span v-for="artist in newMusic.artists">{{artist.name}}</span>
                    </p>
                </div>
                <div class="right">
                    <img v-if="show" @click="btnp(2)" src="./image/icon/gPlay.png">
                    <img v-else @click="btnp(1)" src="./image/icon/gPause.png">
                    <img @click="songbth = true" src="./image/icon/gSongList.png">
                </div>

                <div class="song-list" v-if="songbth">
                    <h3>播放列表</h3>
                    <ul class="song-ul">
                        <!-- 修改点 -->
                        <li v-for="(song,index) in songs" @click.stop="play(song)">
                            <span style="width: 40px;"></span>
                            <!-- 修改点 -->
                            <span v-bind:class="{gscol:newMusic.id == song.id}">{{index + 1}}&nbsp;-&nbsp;{{song.name}}</span>
                            <!-- 修改点 -->
                            <img class="delpic" src="./image/icon/删除.png" @click.stop="delbtn(index)">
                        </li>
                    </ul>

                    <h3 @click="songbth = false">关闭</h3>
                </div>

            </div>
        </div>
    </div>



    <!-- 引用组件 -->
    <script src="./js/tab-nav.js"></script>
    <script src="./js/recommended.js"></script>
    <script src="./js/music-list.js"></script>
    <script src="./js/hot-song.js"></script>

    <script>
        new Vue({
            el: "#app",
            data: {
                linum: 1,
                musiclist: [
                    {
                        "id": 1954974529,
                        "name": "消愁",
                        "maxbr": 999000,
                        "picUrl": "./image/imgs/1.jpg",
                        "play": "./music/消愁.mp3",
                        "artists": [
                            {
                                "name": "毛不易",
                                "id": 9548,
                            }
                        ],
                    },

                    {
                        "id": 1954420092,
                        "name": "新赛马",
                        "maxbr": 320000,
                        "picUrl": "./image/imgs/2.jpg",
                        "play": "./music/新赛马.mp3",
                        "artists": [
                            {
                                "name": "陈耀星",
                                "id": 57811,
                            },
                            {
                                "name": "陈军",
                                "id": 10561,
                            },
                            {
                                "name": "陈依妙",
                                "id": 23103,
                            }
                        ],
                    },
                    {
                        "id": 1954420092,
                        "name": "像我这样的人",
                        "maxbr": 999000,
                        "picUrl": "./image/imgs/3.jpg",
                        "play": "./music/像我这样的人.mp3",
                        "artists": [
                            {
                                "name": "毛不易",
                                "id": 5781,
                            }
                        ],
                    },
                    {
						"id": 1954983178,
						"name": "牵系",
						"maxbr": 999000,
						"picUrl": "./image/imgs/1.jpg",
						"play": "./music/像我这样的人.mp3",
						"artists": [
							{
								"name": "张信哲",
								"id": 6454,
							}
						],
					},
					{
						"id": 1954696277,
						"name": "形容词",
						"maxbr": 999000,
						"picUrl": "./image/imgs/1.jpg",
						"play": "./music/像我这样的人.mp3",
						"artists": [
							{
								"name": "艾热 AIR",
								"id": 1203045,
							}
						],
					},
					{
						"id": 1954942773,
						"name": "灰尘 (Live)",
						"maxbr": 999000,
						"picUrl": "./image/imgs/1.jpg",
						"play": "./music/像我这样的人.mp3",
						"artists": [
							{
								"name": "赵磊",
								"id": 12787662,
							}
						],
					},
					{
						"id": 1955462665,
						"name": "傻女",
						"maxbr": 320000,
						"picUrl": "./image/imgs/1.jpg",
						"play": "./music/像我这样的人.mp3",
						"artists": [
							{
								"name": "苏妙玲",
								"id": 9424,
							}
						],
					},

					{
						"id": 1953856917,
						"name": "前任 请坐",
						"maxbr": 320000,
						"picUrl": "./image/imgs/1.jpg",
						"play": "./music/像我这样的人.mp3",
						"artists": [
							{
								"name": "王金金",
								"id": 12258611,
							}
						],
					},
					{
						"id": 1952528063,
						"name": "Glimpse of Us",
						"maxbr": 999000,
						"picUrl": "./image/imgs/1.jpg",
						"play": "./music/像我这样的人.mp3",
						"artists": [
							{
								"name": "Joji",
								"id": 12203295,
							}
						],
					},
					{
						"id": 146307690,
						"name": "So Good",
						"maxbr": 320000,
						"picUrl": "./image/imgs/1.jpg",
						"play": "./music/像我这样的人.mp3",
						"artists": [
							{
								"name": "Halsey",
								"id": 964321,
							}
						],
					},
                ],
                // 修改点
                show: true,
                url: null,
                newMusic:null,

                songbth: false,//播放列表按钮
                // 修改点
                songs: [],//播放列表歌单
                
            },
            methods: {
                tabgo(event) {
                    console.log(event);
                    this.linum = event;
                },
                play(event) {
                    console.log(event);
                    this.newMusic = event;
                    this.url = event.play;
                    this.show = !this.show;
                    //调用添加歌曲
                    this.addSong(event);

                    // 获取dom元素
                    var player = this.$refs.player;
                    // true就播放，false就暂停
                    if (this.show) {
                        player.play();
                    } else {
                        player.pause();
                    }
                },
                // 播放时触发
                Playstate() {
                    this.show = true;
                },
                // 暂停时触发
                Pausestate() {
                    this.show = false;
                },
                btnp(num) {
                    var player = this.$refs.player;
                    if (num == 1) {
                        player.play();
                    } else {
                        player.pause();
                    }
                },
                // 封装添加歌曲函数
                addSong(item){
                    // 在数组的末尾加上一条数据
                    this.songs.push(item);
                    this.qc(this.songs);
                },
                // 去重函数
                qc(array){
                    for(let i = 0;i < array.length - 1;i++){
                        for(let j = i+1;j < array.length;j++){
                            if(array[i] == array[j]){
                                array.splice(j,1);
                                j--;
                            }
                        }
                    }
                    return array;
                },
                delbtn(index){
                    this.songs.splice(index,1);
                }

            },
            computed: {
                // 新建时间计算属性
                time() {
                    var day = new Date();
                    var month = day.getMonth() + 1;
                    var date = day.getDate();
                    return `${month < 10 ? '0' + month : month}月${date}日`;
                }
            }
        })
    </script>
</body>

</html>